import React, { useState } from 'react'
import { Avatar, Badge } from '@douyinfe/semi-ui';
import TableComponents from '../../components/TableComponents';
import doudian from '../../api/doudian';
import DoudianEditPage from './DoudianEditPage';

const entity = {
    id: 0,
    shop_name: '',
    shop_type: '',
    secsdk_csrf_token: '',
    cookie: '',
    avatar: '',
    bind_time: '',
};

const columns = [
    {
        title: '店铺ID',
        dataIndex: 'id',
    },
    {
        title: 'Logo',
        dataIndex: 'avatar',
        render: (text, record, index) => {
            return <Avatar src={text}>
                {record.shop_name}
            </Avatar>;
        },
    },
    {
        title: '店铺类型',
        dataIndex: 'shop_type',
    },
    {
        title: '绑定时间',
        dataIndex: 'bind_time',
    },
    {
        title: '过期时间',
        dataIndex: 'expire_time',
        render: (text, record, index) => {
            return (new Date(record.expire_time)) < (new Date()) ?
                <span><Badge dot type='danger' /> 过期</span>
                : <span><Badge dot type='success' /> {record.expire_time}</span >
        },
    },
];


export default function DoudianPage() {
    const [visible, setVisible] = useState(false);
    const [data, setData] = useState(entity);
    const [refreshTable, setRefreshTable] = useState(0);

    return (
        <div>
            <TableComponents
                refreshTable={refreshTable}
                withBtn={{
                    add: () => setVisible(true),
                    operation: true,
                    export: true
                }}
                columns={columns}
                saveApi={(data) => doudian.save(data)}
                infoApi={(data) => doudian.info(data).then(({ data }) => {
                    setData(data)
                    setVisible(true)
                })}
                fetchApi={(data) => doudian.list(data)}
                deleteApi={(data) => doudian.delete(data)}
            />

            <DoudianEditPage
                data={data}
                visible={visible}
                setRefreshTable={() => setRefreshTable(Math.random())}
                setVisible={setVisible} />
        </div>
    )
}
